<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import PatientInfo from "./patientInfo.vue";
import Question from "./question.vue";
import Releationship from "./releationship.vue";
import Agree from "./agree.vue";
import {saveTys} from "@/api/keyan/tys";
import {addPatient,} from "@/api/keyan/patient";
import {ElMessageBox} from 'element-plus'


const {proxy} = getCurrentInstance();
const router = useRouter();
const activeStep = ref(1);
const htmlContent = ref();
const dialogModal = ref(false);

const isShowTysSignPage = ref(true);
const isShowTysPdf = ref(false);
const pdfUrl = ref('');
const tysObject = ref({});
const patientInfoObject = ref({});
const refPatientInfo = ref(null);
const patientId = ref(null);


const backEvent = () => {
  ElMessageBox.confirm('关闭页面后当前信息将丢失，确定关闭页面吗？')
      .then(() => {
        router.replace("/keyan/patient");
      })
      .catch(() => {
        // catch error
      });
};
const refTys = ref(null);
const refQuestion = ref(null);

function handSaveTys() {

  // console.log('同意书的结果：', refTys.value.form);
  saveTys(refTys.value.form).then(response => {
    // this.$modal.msgSuccess("保存成功");
    if (response.code === 200) {
      pdfUrl.value = import.meta.env.VITE_APP_BASE_API + response.data.filePath + '#toolbar=0&page=2&zoom=100';
      isShowTysPdf.value = true;
      isShowTysSignPage.value = false;
      tysObject.value = response.data;
    } else {
      proxy.$modal.msgSuccess("同意书保存失败：" + response.msg);
    }
  });
}

// 保存基础信息
function handSavePatientInfo() {
  patientInfoObject.value = refPatientInfo.value.form;
  // console.log('基础信息的结果：', patientInfoObject.value);
  activeStep.value++;
}

function handSaveQuestion() {
  // console.log('问卷的结果：', refQuestion.value.wjResult);
  addPatient({...patientInfoObject.value, ...refQuestion.value.wjResult}).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("保存成功");
      // router.replace("/keyan/patient");
      patientId.value = response.data;
      activeStep.value++;
    } else {
      proxy.$modal.msgSuccess("保存失败：" + response.msg);
    }
  });
}

function handReSignTys() {
  isShowTysPdf.value = false;
  isShowTysSignPage.value = true;
}

// 录入资料完成
function handComplete() {
  router.replace("/keyan/patient");
}

</script>
<template>
  <div class="app-container">
    <div
        style="
        margin: 0px auto;
        border-radius: 5px;
      "
    >
      <el-steps style="cursor: pointer" :active="activeStep" align-center>
        <el-step title="签署知情同意书"/>
        <el-step title="录入基本资料"/>
        <el-step title="填写调查问卷"/>
        <el-step title="添加关系"/>
      </el-steps>
    </div>
    <div style="height: 80vh;  ">
      <div
          v-if="activeStep === 1"
          style="background: #fff; padding: 0"
      >
        <!-- <div
          v-html="htmlContent"
          style="
            width: 600px;
            margin: 20px auto;
            height: 72vh;
            overflow-y: auto;
            padding-top: 20px;
          "
        /> -->
        <Agree ref="refTys" v-show="isShowTysSignPage"/>
        <iframe ref="refTysPdf" :src="pdfUrl" v-show="isShowTysPdf" class="tysPdfIframe" frameborder="no"
                border="0"/>

        <div style=" display: flex; justify-content: space-between; padding: 10px 50px ;">

          <el-button @click="backEvent" icon="close">取消签署</el-button>
          <el-button v-if="isShowTysPdf" icon="RefreshLeft" @click="handReSignTys">重新签署</el-button>
          <el-button v-if="isShowTysSignPage" icon="select" type="primary" @click="handSaveTys">完成签名</el-button>
          <el-button v-if="isShowTysPdf" type="primary" icon="editPen" @click="activeStep++">填写基础信息</el-button>

        </div>
      </div>
      <div v-if="activeStep === 2">
        <PatientInfo ref="refPatientInfo" :tys-object="tysObject" class="content-page"/>
        <div style="display: flex; justify-content: space-between; margin-top: 20px">
          <div>
            <el-button @click="backEvent" icon="close">取消录入</el-button>
            <!--            <el-button icon="back" @click="activeStep&#45;&#45;" style="margin-right: 20px">-->
            <!--              返回上一页-->
            <!--            </el-button>-->
          </div>
          <el-button type="primary" icon="check" @click="handSavePatientInfo">保存并填写调查问卷</el-button>
        </div>
      </div>
      <div v-if="activeStep === 3" style=" ">
        <Question ref="refQuestion" class="content-page" :is-edit="true"/>
        <div style=" display: flex; justify-content: space-between; margin-top: 20px; padding: 0 10px;">
          <div>
            <el-button @click="backEvent" icon="close">取消录入</el-button>
            <!--            <el-button @click="activeStep&#45;&#45;" icon="back" style="margin-right: 20px">-->
            <!--              返回上一页-->
            <!--            </el-button>-->
          </div>
          <el-button icon="select" type="primary" @click="handSaveQuestion">
            保存资料并添加关系
          </el-button>
        </div>
      </div>
      <div v-if="activeStep === 4" style=" ">
        <Releationship :patient-id="patientId"/>
        <div style=" display: flex; justify-content: end;
            margin-top: 20px;
            padding: 0 10px;
          ">
          <el-button icon="select" type="primary" @click="handComplete">
            完成录入
          </el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.app-container {
  background: #f5f5f5;
  height: 90vh;
}

.tysPdfIframe {
  width: 100%;
  height: calc(100vh - 250px);
}

.content-page {
  height: 72vh;
  overflow-y: auto;
  padding: 20px;
  overflow-x: hidden;
  background-color: #FFFFFF;
  border-radius: 5px;
}


</style>
